<!DOCTYPE html>
<html lang="zh-cn" dir="i18n">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- SEO -->
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!-- Robots -->
    <meta name="robots" content="index,follow">
    <meta name="googlebot" content="index,follow">

    <!-- Render -->
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no">
    <meta name="theme-color" content="#ffffff">

    <!-- Control -->
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="x-dns-prefetch-control" content="off">

    <!-- Favicon -->
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="bookmark" href="../favicon.ico" type="image/x-icon">

    <!-- Third Party -->
    <link crossorigin="anonymous" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" href="//lib.baomitu.com/twitter-bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <link crossorigin="anonymous" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" href="//lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../lib/shards/shards.min.css">

    <!-- User Defined -->
    <link href="../css/app.min.css" rel="stylesheet">
    <script src="../js/init.min.js"></script>

    <title>星云宝</title>
</head>

<body>
    <div id="app" class="app">
        <!-- app header -->
        <div class="app-header bg-dark">
            <div class="container">
                <!-- Navigation -->
                <nav class="navbar navbar-expand-md navbar-dark px-0">
                    <a href="../" class="navbar-brand"><img src="../images/logo-white.png" width="30" height="30" class="mr-2" alt="" data-i18n="nebpay-name">星云宝</a>

                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse"><span class="navbar-toggler-icon"></span></button>

                    <div id="navbar-collapse" class="collapse navbar-collapse">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="../">首页</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="./initial.html">安全交易</a>
                            </li>
                        </ul>
                        <ul class="navbar-nav">
                            <li id="change-chainnet" class="nav-item dropdown d-none">
                                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"></a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                    <a class="dropdown-item" href="javascript:" data-chainnet="mainnet">主网</a>
                                    <a class="dropdown-item" href="javascript:" data-chainnet="testnet">测试网</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </nav>
                <!-- / Navigation -->
            </div>
        </div>

        <!-- app subnav -->
        <div class="app-subnav">
            <div class="container">
                <nav class="nav">
                    <a class="nav-link" href="./initial.html">发起交易</a>
                    <a class="nav-link active" href="./all.html">交易列表</a>
                    <a class="nav-link" href="./handle.html">处理交易</a>
                    <span class="align-items-center px-4 text-light d-none d-md-flex">|</span>
                    <a class="nav-link" href="./help.html">帮助说明 ?</a>
                </nav>
            </div>
        </div>

        <!-- app body -->
        <div class="app-body mt-4">
            <div class="container">
                <!-- tx list -->
                <div id="result" style="min-height: 25rem"></div>
            </div>

        </div>

        <!-- app footer -->
        <footer class="pt-5 pb-4">
            <div class="container text-center">
                <hr class="mt-0">
                <ul class="nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link" href="../">主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../about.html">关于</a>
                    </li>
                </ul>
                <p class="text-muted m-0">本站基于
                    <a href="https://nebulas.io" target="_blank">Nebulas.io</a> 平台，支持移动端自适应式布局</p>
                <p class="text-muted m-0">Copyright © 2018. Created By KYW & Viggo.Gao. 由
                    <a href="https://gitee.com" target="_blank">Gitee</a> 提供站点托管,
                    <a href="https://cdn.baomitu.com/" target="_blank">Baomitu</a> 提供静态资源CDN
                </p>
            </div>
        </footer>
    </div>

    <!-- tempate -->
    <script id="tpl-result" type="text/html">
        <div class="row mb-3 table-toolbar">
            <div class="col-lg-5 align-items-center d-none d-lg-flex">
                <p class="mb-0">共 {{size}} 个交易, 当前 第{{page}}页 / 共{{totalPages}}页</p>
            </div>
            <div class="col-lg-7 col-md-12">
                <ul class="pagination mb-0 float-right d-none d-md-flex">
                    {{if page > 1}}
                    <li class="page-item">
                        <a class="page-link rounded-0" href="javascript: loadData({{page-1}},'{{wallet}}');">上一页</a>
                    </li>
                    {{ else }}
                    <li class="page-item disabled">
                        <a class="page-link rounded-0" href="javascript:;">上一页</a>
                    </li>
                    {{/if}}
                    {{if page < totalPages}}
                    <li class="page-item">
                        <a class="page-link rounded-0" href="javascript: loadData({{page+1}},'{{wallet}}');">下一页</a>
                    </li>
                    {{ else }}
                    <li class="page-item disabled">
                        <a class="page-link rounded-0" href="javascript:;">下一页</a>
                    </li>
                    {{/if}}
                </ul>
                <div class="wrapper pr-md-3">
                    <div class="input-group mb-0">
                        <input name="wallet" type="text" class="form-control  rounded-0" placeholder="请输入钱包地址" autofocus value="{{if wallet}}{{wallet}}{{/if}}">
                        <div class="input-group-append">
                            <button class="btn btn-dark rounded-0" type="button" onclick="filter()">搜索</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>交易号</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>付款方</th>
                        <th>收款方</th>
                        <th>金额</th>
                    </tr>
                </thead>
                <tbody>
                    {{if items.length > 0}}{{each items}}
                    <tr>
                        <td class="hash">
                            <a href="./handle.html?hash={{$value.hash}}">{{$value.hash}}</a>
                        </td>
                        <td>{{$value.state | toState}}</td>
                        <td>{{$value.createdAt | toDayjs}}</td>
                        <td class="hash">
                            <a href="javascript: loadData(1, '{{$value.from}}');">{{$value.from}}</a>
                        </td>
                        <td class="hash">
                            <a href="javascript: loadData(1, '{{$value.to}}');">{{$value.to}}</a>
                        </td>
                        <td>{{$value.txAmount | toNas}}</td>
                    </tr>
                    {{/each}}
                    {{else}}
                        <tr>
                            <td colspan="6" class="text-center">暂无数据</td>
                        </tr>
                        {{/if}}
                </tbody>
            </table>
        </div>
        {{if items.length > 0}}
        <hr>
        <div class="d-md-flex align-items-md-center">
            <p class="mb-0 text-center text-md-left">共 {{size}} 个交易, 当前 第{{page}}页 / 共{{totalPages}}页</p>
            <ul class="pagination mb-0 ml-auto mr-0 mt-3 mt-md-0 self-aligns-center d-flex justify-content-center">
                {{if page > 1}}
                <li class="page-item">
                    <a class="page-link rounded-0" href="javascript: loadData({{page-1}},'{{wallet}}');">上一页</a>
                </li>
                {{ else }}
                <li class="page-item disabled">
                    <a class="page-link rounded-0" href="javascript:;">上一页</a>
                </li>
                {{/if}}
                {{if page < totalPages}}
                <li class="page-item">
                    <a class="page-link rounded-0" href="javascript: loadData({{page+1}}, '{{wallet}}');">下一页</a>
                </li>
                {{ else }}
                <li class="page-item disabled">
                    <a class="page-link rounded-0" href="javascript:;">下一页</a>
                </li>
                {{/if}}
            </ul>
        </div>
        {{/if}}
    </script>

    <!-- Third Party -->
    <!-- Third Party -->
    <script crossorigin="anonymous" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" src="//lib.baomitu.com/jquery/3.3.1/jquery.slim.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-lZmvU/TzxoIQIOD9yQDEpvxp6wEU32Fy0ckUgOH4EIlMOCdR823rg4+3gWRwnX1M" src="//lib.baomitu.com/twitter-bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>

    <script src="../lib/shards/shards.min.js"></script>
    <script src="../lib/neb/nebulas.min.js"></script>
    <script src="../lib/nebpay/nebPay.min.js"></script>

    <!-- User Defined -->
    <script src="../js/tools.min.js"></script>
    <script src="../js/global.min.js"></script>
    <script>
        var Nebulas = require('nebulas'),
            Account = Nebulas.Account,
            Neb = Nebulas.Neb,
            Unit = Nebulas.Unit,
            Utils = Nebulas.Utils;

        var neb = new Neb();
        neb.setRequest(new Nebulas.HttpRequest(app.config.host));

        template.defaults.imports.toNas = function(value) {
            return Unit.fromBasic(Utils.toBigNumber(value), 'nas').toNumber();
        };
        template.defaults.imports.toState = function(value) {
            switch (value) {
                case 'init':
                    return '付款方发起安全交易，等待收款方确认';
                case 'underway':
                    return '收款方已确认交易，等待付款方确认支付';
                case 'refund':
                    return '付款方申请退款，等待收款方确认';
                case 'to.negotiate':
                    return '收款方发起纠纷协商，等待付款方确认';
                case 'from.negotiate':
                    return '付款方发起纠纷协商, 等待收款方确认';
                default:
                    return '交易完成';
            }
        };
        template.defaults.imports.toDayjs = function(value) {
            return dayjs(new Date(value * 1000)).format('YYYY-MM-DD HH:mm:ss');
        };

        function loadData(page, wallet) {
            wallet = wallet || null;
            NProgress.start();

            Url.updateSearchParam('p', page);
            Url.updateSearchParam('wallet', wallet || '');

            var limit = 10;
            var offset = (page - 1) * limit;

            var from = app.config.dappAddress;
            var dappAddress = app.config.dappAddress;
            var value = 0;
            var nonce = 0;
            var gasPrice = 1000000;
            var gasLimit = 2000000;
            var contract = {
                function: 'getAllTx',
                args: JSON.stringify([offset, limit])
            }

            if (wallet) {
                contract = {
                    function: 'getUserTx',
                    args: JSON.stringify([wallet, offset, limit])
                }
            }

            NProgress.set(0.3);
            neb.api.call(from, dappAddress, value, nonce, gasPrice, gasLimit, contract).then(function(resp) {
                var result = JSON.parse(resp.result)
                if (result && result.code < 20000) {
                    $('#result').html(template.render($('#tpl-result').html(), {
                        items: result.data,
                        size: result.size,
                        page: page,
                        totalPages: Math.ceil(result.size / limit),
                        wallet: wallet
                    }));
                    // console.log(result.data);
                }
                NProgress.done();
            }).catch(function(error) {
                console.log("error:" + error.message)
            });
        }

        function filter() {
            var $wallet = $('input[name="wallet"]');
            var wallet = $.trim($wallet.val());
            if (wallet === '') {
                swal('提示', '钱包地址不能为空，请正确输入！', 'warning').then(function() {
                    $wallet.focus();
                });
                return false;
            }
            if (!Account.isValidAddress(wallet)) {
                swal('错误', '钱包地址验证失败，请重新输入有效的钱包地址', 'error').then(function() {
                    $wallet.focus();
                });
                return false;
            }

            loadData(1, wallet);
        }

        $(document).ready(function($) {
            'use strict';
            var wallet = $.trim(Url.queryString('wallet'));
            wallet = Account.isValidAddress(wallet) ? wallet : null;
            var page = parseInt($.trim(Url.queryString('p')));
            page = isNaN(page) ? 1 : page;

            loadData(page, wallet);
        });
    </script>
</body>

</html>
